<template>
  <div class="pay-container">
    <!-- 头部概览 -->
    <div class="header">
      <RouterLink to="/Home"> <div class="back">首页&nbsp;</div> </RouterLink>
      /
      <RouterLink to="/Service">
        <div class="back">&nbsp;云市场&nbsp;</div>
      </RouterLink>
      /
      <RouterLink to="/Service/Detail">
        <div class="back">&nbsp; {{ shopData.name }}&nbsp;</div>
      </RouterLink>
      / 结算页
    </div>
    <!-- 主区域 -->
    <div class="main">
      <router-view />
    </div>
    <!-- 底部信息 -->
    <div class="bottom">
      <div class="item" v-for="item in itemData" :key="item.title">
        <div class="item-title">{{ item.title }}</div>
        <a href="" class="item-desc" v-for="i in item.desc" :key="i">{{ i }}</a>
      </div>
      <div class="img-container">
        <img src="@/assets/pay/qrcode.png" alt="" />
        <span>扫码关注公众号</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopData: {
        name: "【短信服务】短信验证码",
      },
      itemData: [
        {
          title: "产品·软件",
          desc: ["分销易", "好管家", "MyCMS", "学管易", "学堂在线"],
        },
        {
          title: "产品·硬件",
          desc: ["服务器", "存储", "网络设备"],
        },
        {
          title: "产品·服务",
          desc: [
            "小程序定制",
            "网站定制",
            "APP定制",
            "公众号管理",
            "系统运维",
            "SEO优化",
          ],
        },
        {
          title: "解决方案",
          desc: ["电子商务", "在线教育", "智慧超市", "智慧物业", "智慧饭堂"],
        },
        {
          title: "云市场",
          desc: ["验证码服务平台", "短信发送平台"],
        },
        {
          title: "公司",
          desc: ["新闻中心", "关于名扬"],
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.pay-container {
  min-height: 791px;
  display: flex;
  flex-direction: column;
  .header {
    flex: 0 0 auto;
    display: flex;
    padding: 24px 0 24px 360px;
    font-size: 12px;
    .back {
      color: @primary;
    }
  }
  .main {
    flex: 1 1 auto;
  }
  .bottom {
    background: #f5f5f5;
    flex: 0 0 auto;
    display: flex;
    padding: 40px 360px;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: column;
      .item-title {
        font-size: 18px;
        margin-bottom: 4px;
        font-weight: bold;
      }
      .item-desc {
        font-size: 14px;
        margin-top: 12px;
      }
    }
    .img-container {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      align-items: center;
      img {
        width: 82px;
        height: 82px;
        object-fit: cover;
      }
    }
  }
}
</style>